<template>
  <!-- 我的排班 -->
  <div>
    <!-- 查询条件开始 -->
    <el-row :gutter="12" style="margin-bottom:5px">
      <el-col :span="24">
        <el-card>
          <el-form :inline="true" label-width="68px">
            <el-form-item style="float:right">
              <el-button type="primary" icon="el-icon-plus" size="small" @click="upWeek()">上一周</el-button>
              <el-button type="success" icon="el-icon-s-operation" size="small" @click="currentWeek()">当前周</el-button>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="nextWeek()">下一周</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <!-- 查询条件结束 -->

    <!-- 时间范围开始 -->
    <el-row :gutter="12" style="margin-bottom:5px">
      <el-col :span="24">
        <el-card>
          <div style="text-align:center">
            <span>{{ schedulingData.startTimeThisWeek }}(周一)</span>-<span>{{ schedulingData.endTimeThisWeek }}(周日)</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 时间范围结束 -->

    <!-- 排班表格开始 -->
    <el-table v-loading="loading" :data="tableData" border :span-method="spanMethod">
      <el-table-column prop="userId" label="医生" align="center" :formatter="userFormatter" />
      <el-table-column prop="deptId" label="科室" align="center" :formatter="deptFormatter" />
      <el-table-column prop="subsectionType" label="时间/日期" align="center" :formatter="subsectionTypeFormatter" />
      <el-table-column prop="schedulingType[0]" :label="labelNames[0]" align="center" :formatter="schedulingTypeDay1Formatter" />
      <el-table-column prop="schedulingType[1]" :label="labelNames[1]" align="center" :formatter="schedulingTypeDay2Formatter" />
      <el-table-column prop="schedulingType[2]" :label="labelNames[2]" align="center" :formatter="schedulingTypeDay3Formatter" />
      <el-table-column prop="schedulingType[3]" :label="labelNames[3]" align="center" :formatter="schedulingTypeDay4Formatter" />
      <el-table-column prop="schedulingType[4]" :label="labelNames[4]" align="center" :formatter="schedulingTypeDay5Formatter" />
      <el-table-column prop="schedulingType[5]" :label="labelNames[5]" align="center" :formatter="schedulingTypeDay6Formatter" />
      <el-table-column prop="schedulingType[6]" :label="labelNames[6]" align="center" :formatter="schedulingTypeDay7Formatter" />
    </el-table>
    <!-- 排班表格结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading:false,
      // 条件
      queryParams: {
        queryDate: undefined
      },
      // 时间范围
      schedulingData: {
        startTimeThisWeek: undefined,
        endTimeThisWeek: undefined,
      },
      tableData:[],
      labelNames:['', '', '', '', '', '', ''],
    }
  },
  computed: {
    groupNum() { // 获取医生列表数组
      return new Set(this.tableData.map(o => o.userId))
    }
  },
  created() {
    // 加载所有部门
    this.initDept();
    // 加载所有医生信息
    this.initDoctor();
    // 查询 排班数据  返回值填充 schedulingData、tableData、labelNames
    this.listScheduling();
    // 加载挂号时段 上下午+晚上
    this.initSubsectionType();
    // 加载挂号类型 门诊急诊
    this.initschedulingType();
    this.currentWeek();
  },
  methods: {
    listScheduling() {
      this.loading = true;
      this.$axios.post("/doctor/api/scheduling/queryMyScheduling", this.queryParams).then(row => {
        this.schedulingData.startTimeThisWeek = row.data.data.beginDate;
        this.schedulingData.endTimeThisWeek = row.data.data.endDate;
        this.tableData = row.data.data.tableData;
        this.labelNames = row.data.data.labelName;
        this.loading = false;
      })
    },
    // 上一周
    upWeek() {
      this.queryParams.queryDate = this.schedulingData.startTimeThisWeek
      this.listScheduling()
    },
    // 当前周
    currentWeek() {
      this.queryParams.queryDate = undefined
      this.listScheduling()
    },
    // 下一周
    nextWeek() {
      this.queryParams.queryDate = this.schedulingData.endTimeThisWeek
      this.listScheduling()
    },
    // 加载所有部门
    initDept() {
      this.$axios.get("/doctor/system/deptList").then(row => {
        this.deptOptions = row.data.data;
      })
    },
    // 解析部门
    deptFormatter(row) {
      let v = row.deptId;
      for (let i = 0; i < this.deptOptions.length; i++) {
        if (this.deptOptions[i].deptId == v) {
          return this.deptOptions[i].deptName;
        }
      }
      return "";
    },
    // 加载所有医生信息
    initDoctor() {
      this.$axios.get("/doctor/system/getListUser").then(row => {
        this.userOptions = row.data.data;
      })
    },
    // 解析医生
    userFormatter(row) {
      let v = row.userId;
      for (let i = 0; i < this.userOptions.length; i++) {
        if (this.userOptions[i].userId == v) {
          return this.userOptions[i].userName;
        }
      }
      return "";
    },
    // 加载挂号时段 上下午+晚上
    initSubsectionType() {
      this.$axios.get("doctor/system/dictDataByType/his_subsection_type").then(row => {
        this.subsectionTypeOptions = row.data.data;
      })
    },
    // 解析 加载挂号时段
    subsectionTypeFormatter(row) {
      let v = row.subsectionType;
      return this.formatDict(this.subsectionTypeOptions, v);
    },
    // 加载挂号类型 门诊急诊
    initschedulingType() {
      this.$axios.get("doctor/system/dictDataByType/his_scheduling_type").then(row => {
        this.schedulingTypeOptions = row.data.data;
      })
    },
    // 解析 加载挂号类型 周一排班类型
    schedulingTypeDay1Formatter(row) {
      return this.formatDict(this.schedulingTypeOptions, row.schedulingType[0])
    },
    // 解析 加载挂号类型 周二排班类型
    schedulingTypeDay2Formatter(row) {
      return this.formatDict(this.schedulingTypeOptions, row.schedulingType[1])
    },
    // 解析 加载挂号类型 周三排班类型
    schedulingTypeDay3Formatter(row) {
      return this.formatDict(this.schedulingTypeOptions, row.schedulingType[2])
    },
    // 解析 加载挂号类型 周四排班类型
    schedulingTypeDay4Formatter(row) {
      return this.formatDict(this.schedulingTypeOptions, row.schedulingType[3])
    },
    // 解析 加载挂号类型 周五排班类型
    schedulingTypeDay5Formatter(row) {
      return this.formatDict(this.schedulingTypeOptions, row.schedulingType[4])
    },
    // 解析 加载挂号类型 周六排班类型
    schedulingTypeDay6Formatter(row) {
      return this.formatDict(this.schedulingTypeOptions, row.schedulingType[5])
    },
    // 解析 加载挂号类型 周日排班类型
    schedulingTypeDay7Formatter(row) {
      return this.formatDict(this.schedulingTypeOptions, row.schedulingType[6])
    },
    // 合并的代码
    spanMethod(data) { // 对于表格数据进行分组合并操作，UI组件回调函数
      const { row, rowIndex, columnIndex } = data
      if (columnIndex < 2 || columnIndex > 9) { // 医生合并展示区
        const len = this.userGroup(row.userId)
        const lenName = this.userIdLen(row.userId)
        if (rowIndex === lenName) { // 某医生首位部门行
          return {
            rowspan: len,
            colspan: 1
          }
        } else {
          return { // 某医生非首位部门行
            rowspan: 0,
            colspan: 0
          }
        }
      } else { // 排班信息展示区
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    },
    userGroup(name) { // 根据医生名称获取医生数量
      return this.tableData.filter(o => o.userId === name).length
    },
    userIdLen(name) { // 根据医生名称获取该医生第一个部门在全量部门中的偏移位置
      const tmp = Array.from(this.groupNum)
      const index = tmp.indexOf(name) // 某医生在全医生中的偏移位置
      let len = 0
      for (let i = 0; i < index; i++) {
        len += this.userGroup(tmp[i])
      }
      return len
    },
  }
}
</script>

<style></style>